<template>
  <router-link :to="`/product/${good.id}`"
               class="home-category-good">
    <img v-lazy="good.picture"/>
    <div>
      <span class="ellipsis-2">{{ good.name }}</span>
      <span class="ellipsis">{{ good.desc }}</span>
      <span><i>￥</i>{{ good.price }}</span>
    </div>
  </router-link>
</template>

<script lang="ts"
        setup>
import type {Good} from '@/types/good'
import {toRefs} from 'vue'

let props = defineProps<{
  data: Good
}>()
let {data: good} = toRefs(props)
</script>

<style lang="less"
       scoped>
.home-category-good {
  width: 308px;
  height: 118px;
  padding: 12px;
  margin: 0 12px 20px 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  cursor: pointer;

  &:hover {
    background: #e3f9f4;
  }

  img {
    width: 95px;
    height: 95px;
    margin-right: 12px;
  }

  div {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    span:nth-of-type(1) {
      font-size: 16px;
      color: #666;
    }

    span:nth-of-type(2) {
      color: #999;
    }

    span:nth-of-type(3) {
      font-size: 22px;
      color: @priceColor;

      i {
        font-size: 16px;
      }
    }
  }
}
</style>